<template>
  <div v-enter-helper="getList" class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <el-button class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button> -->
        <el-button class="marginRB10" plain type="primary" @click="getExcel()"
        >导出Excle
        </el-button
        >
        <el-button
          class="marginRB10"
          plain
          type="success"
          @click="handlePassAll(1)"
        >批量同意
        </el-button
        >
        <el-button
          class="marginRB10"
          plain
          type="danger"
          @click="handleRefuseAll(2)"
        >批量拒绝
        </el-button
        >

        <el-date-picker
          v-model="date"
          clearable
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="handleChangeData"
        >
        </el-date-picker>

        <el-select
          v-model="listQuery.status"
          class="filter-item marginRB10"
          filterable
          placeholder="请选择状态"
          style="width: 200px"
        >
          <el-option
            v-for="item in selectList1"
            :key="item.key"
            :label="item.lab"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-input
          v-model="listQuery.real_name"
          class="marginRB10"
          clearable
          placeholder="姓名"
          style="width: 200px"
        ></el-input>
        <el-input
          v-model="listQuery.bank_num"
          class="marginRB10"
          clearable
          placeholder="提现账号"
          style="width: 200px"
        ></el-input>
        <!-- <el-input
          class="marginRB10"
          v-model="listQuery.remark"
          placeholder="备注"
          style="width: 200px"
          clearable
        ></el-input> -->
        <el-input
          v-model="listQuery.mobile"
          class="marginRB10"
          clearable
          placeholder="手机号"
          style="width: 200px"
        ></el-input>
        <!-- <el-select filterable v-model="listQuery.type" class="filter-item marginRB10" placeholder='请选择提现来源' style="width: 200px;">
      <el-option v-for="item in sourceList" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select> -->
        <el-input
          v-model="listQuery.user_code"
          class="marginRB10"
          clearable
          placeholder="用户编号"
          style="width: 200px"
        ></el-input>
        <el-button class="marginRB10" type="primary" @click="searchList"
        >搜索
        </el-button
        >
        <el-button class="marginRB10" type="primary" @click="resetList"
        >重置
        </el-button
        >
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          row-key="id"
          style="margin-bottom: 20px;width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :selectable="checkboxSelect"
            type="selection"
            width="40px"
          ></el-table-column>
          <el-table-column label="序号" prop="id" width="200"></el-table-column>
          <el-table-column label="用户编号" prop="user_code" width="200"></el-table-column>
          <el-table-column label="手机号" prop="mobile" width="200"></el-table-column>
          <el-table-column label="提现金币" prop="gold" width="200"></el-table-column>
          <el-table-column label="提现金额" prop="money" width="200"></el-table-column>
          <el-table-column label="提现帐号" prop="bank_num" width="200"></el-table-column>
          <el-table-column label="开户行" prop="bank_name" width="200"></el-table-column>
          <el-table-column label="支行" prop="bank_zhi" width="200"></el-table-column>
          <el-table-column label="预留手机号" prop="origin_mobile" width="200">
          </el-table-column>
          <el-table-column label="姓名" prop="cardholder"></el-table-column>
          <el-table-column label="身份证号" prop="card_number">
          </el-table-column>
          <el-table-column label="类别" prop="bank_type">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.bank_type === 1" type="info"
              >支付宝
              </el-tag
              >
              <el-tag v-if="scope.row.bank_type === 2" type="info">微信</el-tag>
              <el-tag v-if="scope.row.bank_type === 3" type="info"
              >银行卡
              </el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 2" type="success">通过</el-tag>
              <el-tag v-if="scope.row.status === 1" type="primary"
              >待审核
              </el-tag
              >
              <el-tag v-if="scope.row.status === 3" type="danger">拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="时间" prop="add_time"></el-table-column>

          <el-table-column fixed="right" label="操作" min-width="220">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status === 1"
                plain
                size="mini"
                type="success"
                @click="handlePass(scope.row, 1)"
              >同意
              </el-button
              >
              <el-button
                v-if="scope.row.status === 1"
                plain
                size="mini"
                type="info"
                @click="handleRefuse(scope.row, 2)"
              >拒绝
              </el-button
              >
              <el-button
                plain
                size="mini"
                type="success"
                @click="handleUpdate(scope.row)"
              >备注
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 删除弹框 -->
    <el-dialog :visible.sync="deleteDialogVisible" title="信息" width="435px">
      <span style="">确定执行此操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 备注 -->
    <el-dialog
      :visible.sync="remarkVisible"
      title="备注"
      @close="handleDialogClose('remarkForm')"
    >
      <el-form
        ref="remarkForm"
        :model="remarkForm"
        :rules="remarkFormRules"
        label-width="120px"
      >
        <el-form-item label="备注" prop="remark">
          <el-input v-model="remarkForm.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="remarkVisible = false">返回</el-button>
          <el-button type="primary" @click="confirmRemark">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getExcel, listData, postCheck, postRemark } from '@/api/order/withdraw'

export default {
  data() {
    return {
      confirmBtn: false,
      deleteDialogVisible: false,
      checkForm: {
        type: undefined
      },
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: '',
      remarkVisible: false,
      remarkFormRules: {
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      remarkForm: {
        remark: undefined
      },
      row_id: undefined,
      listLoading: true,
      total: 0,
      date: null,
      listQuery: {
        page: 1,
        perPage: 10,
        start_time: undefined,
        end_time: undefined,
        status: undefined,
        full_name: undefined,
        card_number: undefined,
        mobile: undefined,
        remarks: undefined,
        user_code: undefined,
        bank_type: 3
      },
      selectList1: [
        { key: 1, lab: '待审核' },
        { key: 2, lab: '同意 ' },
        { key: 3, lab: '拒绝' }
      ],
      sourceList: [
        { key: 1, lab: 'app' },
        { key: 2, lab: 'h5' }
      ],
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        remark: undefined
      },
      rules: {
        remark: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    checkboxSelect(row, rowIndex) {
      return row.status === 1
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    handleChangeData(value) {
      if (!value) {
        this.listQuery.start_time = undefined
        this.listQuery.end_time = undefined
      } else if (value && value.length === 2) {
        this.listQuery.start_time = value[0]
        this.listQuery.end_time = value[1]
      }
    },
    getList() {
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total
        this.confirmBtn = false
      })
    },
    resetList() {
      this.date = null
      this.listQuery = {
        page: 1,
        perPage: 10,
        start_time: undefined,
        end_time: undefined,
        status: undefined,
        full_name: undefined,
        card_number: undefined,
        mobile: undefined,
        remarks: undefined,
        user_code: undefined,
        bank_type: 3
      }
      this.getList()
    },
    getExcel() {
      getExcel(this.listQuery).then(response => {
        location.href = response.data.download_url
      })
    },
    handleUpdate(row) {
      this.row_id = row.id
      this.remarkForm.remark = row.remark
      this.remarkVisible = true
    },
    confirmRemark() {
      if (this.confirmBtn) return

      this.$refs.remarkForm.validate(valid => {
        if (valid) {
          this.confirmBtn = true
          postRemark(this.row_id, this.remarkForm).then(response => {
            if (response.code === 200) {
              this.getList()
              this.remarkVisible = false
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
            } else {
              this.confirmBtn = false
            }
          })
        } else {
          return false
        }
      })
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 通过
    handlePass(row, type) {
      this.dataIds = { ids: `${row.id}` }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    handlePassAll(type) {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'warning'
        })
        return
      } else {
        let ids = ''
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`
        }
        ids = ids.substring(0, ids.length - 1)
        this.dataIds = { ids: ids }
      }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    // 拒绝
    handleRefuse(row, type) {
      this.dataIds = { ids: `${row.id}` }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    handleRefuseAll(type) {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请先勾选',
          type: 'warning'
        })
        return
      } else {
        let ids = ''
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`
        }
        ids = ids.substring(0, ids.length - 1)
        this.dataIds = { ids: ids }
      }
      this.checkForm.type = type
      this.deleteDialogVisible = true
    },
    // 确定删除
    handleConfirm() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      this.checkForm = Object.assign(this.checkForm, this.dataIds)

      postCheck(this.checkForm).then(response => {
        if (response.code === 200) {
          this.getList()
          this.deleteDialogVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    resetForm() {
      this.form = {
        id: undefined,
        remark: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate() // 清除整个表单的校验
      }
    }
  }
}
</script>
